{template 'header'}
<style type="text/css">
.reapply-card-page .header {
    border-radius:10px;
    background-color:#fff;
    margin:17px 10px;
    box-shadow:rgba(0, 0, 0, 0.06) 0px 2px 12px 0px;
}
.reapply-card-page .header .head-content {
    height:87px;
    padding:0 20px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    border-bottom:1px solid rgba(238, 238, 238, 0.5);
}
.reapply-card-page .header .head-content .header-pic {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    height:62px;
    width:62px;
    background-color:#fff;
    border-radius:50%;
}
.reapply-card-page .header .head-content .header-pic img {
    height:0.58rem;
    width:0.58rem;
    border-radius:50%;
}
.reapply-card-page .header .head-content p {
    width:100%;
    padding-left:20px;
    font-size:0.18rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.reapply-card-page .header .reapply-content, .reapply-card-page .header .reapply-fee {
    height:62px;
    line-height:62px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    font-size:0.16rem;
    padding:0 20px;
    background-color:#fff;
    border-bottom:1px solid rgba(238, 238, 238, 0.5);
}
.reapply-card-page .header .reapply-content div, .reapply-card-page .header .reapply-fee div {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.reapply-card-page .header .reapply-fee {
    border-radius:0 0 10px 10px;
    border-bottom:none;
}
.reapply-card-page .reapply-rules {
    margin-top:28px;
    padding:0 27px;
}
.reapply-card-page .reapply-rules .content-title {
    padding-bottom:10px;
    color:#9b9b9b;
}
.reapply-card-page .reapply-rules div {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.13rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
.reapply-card-page .dialog-title {
    position:absolute;
    top:0;
    left:0;
    height:58px;
    width:100%;
    background-color:#F7F7F7;
    line-height:58px;
    text-align:center;
}
.reapply-card-page .dialog-content {
    text-align:left;
}
.reapply-card-page .dialog-content div {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding-top:7px;
}
.reapply-card-page .dialog-content div:first-child {
    margin-top:50px;
}
.reapply-card-page .footer-tip {
    margin-top:25px;
    text-align:center;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.reapply-card-page .reapply-card-bottom {
    position:fixed;
    bottom:0;
    width:100%;
    height:60px;
    max-width:480px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    background-color:#fff;
}
.reapply-card-page .reapply-card-bottom .bottom-left {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.reapply-card-page .reapply-card-bottom .bottom-left p {
    padding-left:.22rem;
    font-size:.12rem;
    color:#979797;
}
.reapply-card-page .reapply-card-bottom .bottom-left .need-text {
    font-size:.16rem;
    color:#FE5365;
}
.reapply-card-page .reapply-card-bottom .reapply-btn {
    width:1.62rem;
    height:100%;
    background:-webkit-linear-gradient(left, #fe956f, #fe5064);
    text-align:center;
    line-height:60px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    color:#fff;
    font-size:.22rem;
    font-weight:600;
}
</style>
    <div class="reapply-card-page">
        <div class="header">
            <div class="head-content">
                <div class="header-pic">
                    <img id="book-thumb" src="">
                </div>
                <p style="color: rgb(0, 0, 0);"><b id="book-title"></b>
                </p>
            </div>
            <div class="reapply-content">
                <div style="text-align: left; color: rgb(0, 0, 0);">补卡时间</div>
                <div id="bremark-time" style="text-align: right; color: rgb(107, 107, 107);"></div>
            </div>
            <div class="reapply-fee">
                <div style="text-align: left; color: rgb(0, 0, 0);">补卡费用</div>
                <div style="text-align: right; letter-spacing: 1px; color: rgb(107, 107, 107);">{if $cfg['supply_star']>0}{$cfg['supply_star']}个成长星{else}免费{/if}</div>
            </div>
        </div>
        <div class="reapply-rules">
            {$cfg['bremark2']}
        </div>
        <div class="reapply-card-bottom">
            <div class="bottom-left">
                {if $mem['score'] < $cfg['supply_star']}<p class="need-text">成长星余额不足</p>{/if}
                <p style="letter-spacing: 1px;">成长星余额{$mem['score']}个</p>
            </div>
            {if $mem['score'] < $cfg['supply_star']}
            <div onclick="location.href='{php echo $this->murl('myscore')}'" class="reapply-btn">领取成长星</div>
            {else}
            <div onclick="$('#bremark-sure').removeClass('g-hidden')" class="reapply-btn">立即补卡</div>
            {/if}
        </div>
        <div class="g-modal g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content" style="text-align:left;">
                   	{$cfg['bremark2']}
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                </div>
            </div>
        </div>
        <div id='bremark-suc' class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div>
                        <img class="g-margin-b" src="{RES}img/bremark-suc2.gif" alt="" style="width: 0.5rem;">
                        <p>补卡成功</p>
                    </div>
                </div>
                <div onclick="loadAgain()" class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                </div>
            </div>
        </div>
        <div id="bremark-sure" class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    {if $cfg['supply_star']>0}
                    <div style="padding: 20px 10px; line-height: 25px;">确定使用{$cfg['supply_star']}个成长星兑换一次补卡机会？</div>
                    {else}
                    <div style="padding: 20px 10px; line-height: 25px;">确定要补卡吗？</div>
                	{/if}
                </div>
                <div class="g-modal-footer">
                	<a onclick="$('#bremark-sure').addClass('g-hidden');" class="g-modal-btn grey" href="javascript:;">取消</a>
                	<a onclick="goBremark()" class="g-modal-btn active" href="javascript:;">确定</a>
                </div>
            </div>
        </div>
    </div>
{template 'loading'}
<script>
var mem_book_id = getCookie('mem_book');
var rebremark_time = '';
function getInfo(){
	$.ajax({
		url:'{php echo $this->murl("bremark2")}',
		data: {id: mem_book_id},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			console.log(dat);
			if(dat.code==1){
				rebremark_time = dat.rebremark_time;
				$('#bremark-time').text(rebremark_time);
				$('#book-title').text(dat.book.title);
				$('#book-thumb').attr('src',dat.book.thumb);
			}
			else{
				msgTip(dat.msg,function(){
					location.href='{php echo $this->murl("bremark")}'
				})
			}
		}
	});	
}
function goBremark(){
	$('#bremark-sure').addClass('g-hidden');
	$.ajax({
		url:'{php echo $this->murl("bremark2")}',
		data: {id: mem_book_id, rebremark_time: rebremark_time, op: 'rebremark'},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			if(dat.code==1){
				$('#bremark-suc').removeClass('g-hidden');
			}
			else{
				msgTip(dat.msg)
			}
		}
	});
}
function loadAgain(){
	$('#bremark-suc').addClass('g-hidden');
	location.href='{php echo $this->murl("bremark2")}'
}
$(function(){
	getInfo();
})
</script>    
</body></html>